<template>
    <div class="page-container" style="height:100%;">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form" v-if="model != null && model.isInit">
                <a-form-item label="角色名称" v-bind="formItemLayout">
                    <div class="form-item-text">{{model.name}}</div>
                </a-form-item>
                <a-form-item label="角色编码" v-bind="formItemLayout">
                    <div class="form-item-text">{{model.code}}</div>
                </a-form-item>
                <a-form-item label="备注" v-bind="formItemLayout">
                    <div class="form-item-text">{{model.remark}}</div>
                </a-form-item>
            </a-form>
            <a-form :layout="formLayout" :form="form" v-else>
                <a-form-item label="角色名称" v-bind="formItemLayout">
                    <a-input placeholder='请输入角色名称' v-decorator="['name',{rules: [{ required: true, message: '角色名称不能为空' }]}]" style="width: 300px;"/>
                </a-form-item>
                <a-form-item label="备注" v-bind="formItemLayout">
                    <a-textarea autoSize placeholder='备注' v-decorator="['remark']" style="width: 300px;"/>
                </a-form-item>
                <a-form-item :wrapperCol="{ span:18,offset:5 }">
                    <a-button @click="onSubmit" type="primary"> 保存 </a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        props:{
            model:{
                type:Object,
                default:null
            }
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                loading:false,
                label:'',
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this;
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            },
        },
        methods:{
            onClose(){
                this.$emit("save","close", false);
            },
            onSubmit(){
                this.form.validateFields(
                        (err,values) => {
                            if (!err) {
                                this.onSave(values);
                            }
                        },
                )
            },
            async onSave(data){
                this.$emit("save","add",{...this.model,...data});
            },
            async onLoad(){
                if(this.model != null && !this.model.isInit) {
                    const {name, remark } = this.model;
                    this.form.setFieldsValue({name,remark});
                }
            }
        },
        mounted(){
            this.onLoad();
        },
    }
</script>